<template>
  <div>
    <v-card title="通过外部URL渲染地图">
      <vcu-chart-geo
        :data="chartData"
        :settings="chartSettings"
        :legend-visible="false"
      />
    </v-card>
  </div>
</template>

<script>
const randomData = () => {
  return Math.round(Math.random() * 1000);
};
export default {
  data() {
    return {
      chartData: {
        measures: [
          {
            name: "iPhone XR",
            data: [
              { name: "Alaska", value: randomData() },
              { name: "Alabama", value: randomData() },
              { name: "Arizona", value: randomData() },
              { name: "Arkansas", value: randomData() },
              { name: "California", value: randomData() },
              { name: "Colorado", value: randomData() },
              { name: "Connecticut", value: randomData() },
              { name: "Delaware", value: randomData() },
              { name: "District of Columbia", value: randomData() },
              { name: "Florida", value: randomData() },
              { name: "Georgia", value: randomData() },
              { name: "Hawaii", value: randomData() },
              { name: "Idaho", value: randomData() },
              { name: "Illinois", value: randomData() },
              { name: "Indiana", value: randomData() },
              { name: "Iowa", value: randomData() },
              { name: "Kansas", value: randomData() },
              { name: "Kentucky", value: randomData() },
              { name: "Louisiana", value: randomData() },
              { name: "Maine", value: randomData() },
              { name: "Maryland", value: randomData() },
              { name: "Massachusetts", value: randomData() },
              { name: "Michigan", value: randomData() },
              { name: "Minnesota", value: randomData() },
              { name: "Mississippi", value: randomData() },
              { name: "Missouri", value: randomData() },
              { name: "Montana", value: randomData() },
              { name: "Nebraska", value: randomData() },
              { name: "Nevada", value: randomData() },
              { name: "New Hampshire", value: randomData() },
              { name: "New Jersey", value: randomData() },
              { name: "New Mexico", value: randomData() },
              { name: "New York", value: randomData() },
              { name: "North Carolina", value: randomData() },
              { name: "North Dakota", value: randomData() },
              { name: "Ohio", value: randomData() },
              { name: "Oklahoma", value: randomData() },
              { name: "Oregon", value: randomData() },
              { name: "Pennsylvania", value: randomData() },
              { name: "Rhode Island", value: randomData() },
              { name: "South Carolina", value: randomData() },
              { name: "South Dakota", value: randomData() },
              { name: "Tennessee", value: randomData() },
              { name: "Texas", value: randomData() },
              { name: "Utah", value: randomData() },
              { name: "Polygon", value: randomData() },
              { name: "Virginia", value: randomData() },
              { name: "Vermont", value: randomData() },
              { name: "Washington", value: randomData() },
              { name: "West Virginia", value: randomData() },
              { name: "Wisconsin", value: randomData() },
              { name: "Wyoming", value: randomData() },
              { name: "Puerto Rico", value: randomData() },
            ],
          },
        ],
      },
      chartSettings: {
        visualMapVisible: true,
        visualMap: {
          inRange: {
            color: ["#C6FFDD", "#FBD786", "#f7797d"],
          },
        },
        mapUrlPrefix:
          "https://raw.githubusercontent.com/pissang/starbucks/gh-pages/json/",
        mapName: "USA",
      },
    };
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
</style>
